<template>
  <a-card :bordered="false">
    <a-radio-group v-model="listType" style="margin-bottom: 16px" button-style="solid">
      <a-radio-button value="list">
        商品列表
      </a-radio-button>
      <a-radio-button value="release">
        上架商品
      </a-radio-button>
      <a-radio-button value="unreleased">
        下架商品
      </a-radio-button>
      <a-radio-button value="recycle">
        商品回收站
      </a-radio-button>
    </a-radio-group>

    <!-- 查询区域-start -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="refreshTable">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="商品内容">
              <a-input placeholder="商品编号/名称" v-model="queryParam.name" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="加入时间">
              <a-range-picker v-model="queryParam.crtDtRange" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="refreshTable" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-end -->

    <!-- 操作按钮区域 -->
    <div class="table-operator" v-if="listType === 'list'">
      <a-button @click="add" type="primary" icon="plus">添加商品</a-button>
      <a-button @click="delBatch" type="danger" icon="delete">批量删除</a-button>
    </div>

    <!-- table区域 -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;" v-if="listType === 'list'">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="listType === 'recycle' ? loadRecycleData : loadData"
        :rowSelection="listType === 'list' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
      >
        <span slot="name" slot-scope="text, record">
          <a-avatar shape="square" size="large" :src="viewFileUrl + record.coverFileId" />
          {{ record.name }}
        </span>

        <span slot="issueStatus" slot-scope="text, record">
          <a-switch :checked="text === issueStatusEnum.RELEASE.KEY" @click="switchIssuStatus(record)" />
        </span>

        <span slot="action" slot-scope="text, record">
          <template v-if="listType === 'recycle'">
            <a @click="restore(record)">还原</a>
            <a-divider type="vertical"/>
          </template>
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => del([record.id])">
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical"/>
          <a @click="showLogList(record)">日志</a>
        </span>
      </s-table>
    </div>

    <commodity-modal ref="modal" @ok="refreshTable"></commodity-modal>
    <commodity-log-list ref="logList"></commodity-log-list>
  </a-card>
</template>

<script>
import { ListMixin } from '@/mixins/ListMixin'
import CommodityModal from './modules/CommodityModal'
import CommodityLogList from './modules/CommodityLogList'

import { COMMODITY_ISSUE_STATUS_ENUM } from '@/store/mutation-types'
import { apiQueryCommodityList, apiReleaseCommodity, apiUnreleasedCommodity, apiDelBatchCommodity, apiQueryRecycleCommodityList, apiRestoreCommodity } from '@/api/commodity'
import { VIEW_FILE_URL } from '@/api/file'

const columns = [
  {
    title: '商品编号',
    dataIndex: 'serialNo',
    key: 'serialNo'
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '价格/运费',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '是否上架',
    dataIndex: 'issueStatus',
    key: 'issueStatus',
    scopedSlots: { customRender: 'issueStatus' }
  },
  {
    title: '库存',
    dataIndex: 'quantity',
    key: 'quantity'
  },
  {
    title: '加入时间',
    dataIndex: 'crtDt',
    key: 'crtDt',
    width: 180
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: 200
  }
]

export default {
  name: 'CommodityList',
  components: {
    CommodityModal, CommodityLogList
  },
  mixins: [ListMixin],
  data () {
    return {
      listType: 'list',
      issueStatusEnum: COMMODITY_ISSUE_STATUS_ENUM,
      columns,
      loadRecycleData: parameter => {
        return apiQueryRecycleCommodityList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      loadData: parameter => {
        return apiQueryCommodityList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      viewFileUrl: VIEW_FILE_URL
    }
  },
  watch: {
    listType (newValue) {
      if (newValue === 'release') {
        this.queryParam.issueStatus = this.issueStatusEnum.RELEASE.KEY
      } else if (newValue === 'unreleased') {
        this.queryParam.issueStatus = this.issueStatusEnum.UNRELEASED.KEY
      } else {
        delete this.queryParam.issueStatus
      }
      this.$nextTick(() => {
        this.refreshTable()
      })
    }
  },
  methods: {
    add () {
      this.$refs.modal.show('新增')
    },
    edit (record) {
      this.$refs.modal.show('修改', record)
    },
    delBatch () {
      const that = this
      if (that.selectedRowKeys.length === 0) {
        this.$message.warn('请需要删除的选择条目！')
        return
      }
      this.$confirm({
        title: '警告',
        content: `真的要删除这些商品吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          return that.del()
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },
    del (ids) {
      apiDelBatchCommodity(ids || this.selectedRowKeys).then(res => {
        if (res.code === 1) {
          this.$message.success(res.msg)
          this.refreshTable()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    showLogList (record) {
      this.$refs.logList.show(`商品[${record.serialNo} - ${record.name}]的日志`, record)
    },
    restore (record) {
      const that = this
      this.$confirm({
        title: '警告',
        content: `真的要还原吗?`,
        okText: '还原',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          return apiRestoreCommodity(record.id)
            .then((res) => {
              if (res.code === 1) {
                that.$message.success(res.msg)
              }
              that.refreshTable()
            })
            .catch((err) => console.log('Oops errors!', err))
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },
    switchIssuStatus (record) {
      if (record.issueStatus === this.issueStatusEnum.UNRELEASED.KEY) {
        this.release(record)
      } else {
        this.unReleased(record)
      }
    },
    release (record) {
      const that = this
      this.$confirm({
        title: '警告',
        content: `真的要上架吗?`,
        okText: '上架',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          return apiReleaseCommodity(record.id)
            .then((res) => {
              that.refreshTable()
            })
            .catch((err) => console.log('Oops errors!', err))
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },
    unReleased (record) {
      const that = this
      this.$confirm({
        title: '警告',
        content: `真的要下架吗?`,
        okText: '下架',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          return apiUnreleasedCommodity(record.id)
            .then((res) => {
              that.refreshTable()
            })
            .catch((err) => console.log('Oops errors!', err))
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
